/* eslint react/prefer-stateless-function:0, react/prop-types:0 */

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Button, Icon, Input, message, Modal, Table, Upload } from 'antd';
import Wrapper from './wrapper';
import style from './style.css';
import * as actions from '../../actions/carouselAction';
import config from '../../config';

const confirm = Modal.confirm;

@connect((state) => ({
  admin: state.admin,
}), actions)
export default class extends Component {

  constructor(props) {
    super(props);
    this.del = this.del.bind(this);
  }

  componentDidMount() {
    this.props.getAll();
  }

  /**
   * 删除栏目
   * @param id
   */
  del(id) {
    const { del } = this.props;
    confirm({
      title: '确定删除此轮播图?',
      content: (
        <div>
          <p>如果你想更换图片，可以直接点击替换图片，替换掉图片即可</p>
        </div>
      ),
      okText: '取消',
      okType: 'danger',
      cancelText: '确定删除',
      onOk() {
      },
      onCancel() {
        del(id);
      },
    });
  }

  render() {
    const { admin, add, submit, updateImg, changeRank } = this.props;
    const carousel = admin.carousel;

    const uploadConfig = {
      name: 'file',
      action: `${config.host}/api/upload/carousel`,
      onChange(info) {
        if (info.file.status === 'done' && info.file.response.code === 200) {
          message.success(`上传成功`);
          updateImg(info.file.response.data);
        } else if (info.file.status === 'error') {
          message.error(`上传失败`);
        }
      },
    };

    const columns = [
      {
        title: '显示顺序',
        dataIndex: 'rank',
        key: 'rank',
        width: 100,
        render: (text, record) => <Input type="number" defaultValue={text}
                                         onBlur={e => changeRank(e.target.value, record)} />
      },
      {
        title: <span>图片地址<span
          style={{ color: '#999', fontSize: '12px' }}>（不可直接输入图片地址，通过右侧按钮上传图片后地址会自动替换）</span></span>,
        dataIndex: 'url',
        key: 'url',
        render: (text, record) =>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            {
              text
                ?
                <Input type="text" value={text} disabled onChange={f => f} />
                :
                <span>点击右侧按钮添加</span>
            }
            <Upload {...uploadConfig} data={record} style={{ marginLeft: '10px' }}>
            <Button>
              <Icon type="upload" /> {text ? '替换图片' : '上传图片'}
            </Button>
          </Upload>
        </div>
      },
      {
        title: '预览',
        dataIndex: 'url',
        key: 'preview',
        width: 100,
        render: (text, record) => {
          if (!text) {
            return <span>无图片</span>;
          }
          return <img src={text} style={{ width: '120px', height: '60px', border: '1px solid #d7d7d7' }} />
        }
      },
      {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        render: (text, record) => {
          return (
            <div>
              <a onClick={() => this.del(record.id)}>删除</a>
            </div>
          );
        }
      }
    ];
    return (
      <Wrapper openKeys="home" selectedKeys="carousel">
        <div className={style.pageTitle}>轮播图</div>
        <div style={{ margin: '0 0 15px' }}>
          添加新的轮播图，建议尺寸在1200px x 400px。直接上传大尺寸的图片会被裁剪。
          <Button type="primary" size="small" onClick={add}>添加</Button>
        </div>
        <div style={{ margin: '0 0 15px' }}>
          显示顺序从0开始，控制在首页上图片展示的顺序，即0，1，2，3...这样的顺序循环展示。
        </div>
        <Table
          rowKey="id"
          dataSource={carousel}
          columns={columns}
          pagination={false}
        />
        <div style={{ display: 'flex', justifyContent: 'center', margin: '30px 0' }}>
          <Button size="large" type="primary" onClick={submit}>更新数据</Button>
        </div>
      </Wrapper>
    );
  }
}
